<template>
	<view class="content">
		<view class="splite"></view>
		<view class="rowBox">
			<view class="left fontSize15">+86</view>
			<input class="right" type="number" placeholder="请输入手机号" maxlength="11"	 v-model="data.tel"	@input="getTel" disabled="disabled">
			<view class="clearBoth"></view>
		</view>
		<view class="rowBox">
			<view class="left fontSize15">验证码</view>
			<input class="right" type="number" placeholder="请输入短信验证码" maxlength="6" 	@input="getCode">
			<view class="codeBtn fontSize13" @tap="btnCode">{{data.codeName}}</view>
			<view class="clearBoth"></view>
		</view>
		
		<view class="rowBox">
			<view class="left fontSize15">+86</view>
			<input class="right" type="number" placeholder="请输入新手机号" maxlength="11"		@input="getNewTel">
			<view class="clearBoth"></view>
		</view>
		<view class="rowBox">
			<view class="left fontSize15">验证码</view>
			<input class="right" type="number" placeholder="请输入短信验证码" maxlength="6" 	@input="getNewCode">
			<view class="codeBtn fontSize13" @tap="btnCodes">{{data.codeNames}}</view>
			<view class="clearBoth"></view>
		</view>
		<view class="next" @tap="btnSure">确认</view>
	</view>
</template>
<style>
	.content{}
	.content .splite{width: 100%;height:20upx;}
	.content .rowBox{width:90%;margin-left: 5%;padding:3% 5%;background:white;border:1px solid #F2F2F5;border-radius: 10upx;margin-top:20upx;position: relative;}
	.content .rowBox .codeBtn{height:44upx;line-height: 44upx;position: absolute;top:25%;right:5%;color:#DC582A}
	.content .rowBox .left{width:20%;float: left;color:#30313B;font-size: 28upx;margin-top: 4upx;}
	.content .rowBox .right{width: 70%;height:44upx;float: left;margin-left: 20upx;}
	.content .uni-input-placeholder{font-size: 14px;color:#CCCCCC}
	.content .next{width:90%;padding:2.5% 5%;border-radius: 110upx;font-size: 32upx;margin-top: 60upx;margin-left: 5%;text-align: center;background:#DC582A;color:white;text-align: center;}
</style>
<script>
	import Share from '@/common/wx_share.js'
	export default {
		data() {
			return {
				share:{
					title:"",
					path:'/pages/tabbar/mine',
					imageUrl:'',
					desc:'',
					content:''
				},
				data:{
					"tel":"",
					"code":"",
					"newTel":"",
					"newCode":"",
					"timing":false,
					"timings":false,
					"codeName":"获取验证码",
					"codeNames":"获取验证码",
				},
			}
		},
		onLoad(){
			this.AjaxGetTel()
		},
		methods: {
			AjaxGetTel(){
				let param={
					token:this._$userToken("userInfo").token,
				};
				this._$InitRequest.request('MemberInfo/huoquphone', param).then(res => {
					this.data.tel = res.data.phone
				},error=>{})
			},
			getTel(e){this.data.tel = e.target.value},
			getCode(e){this.data.code = e.target.value},
			getNewTel(e){this.data.newTel = e.target.value},
			getNewCode(e){this.data.newCode = e.target.value},
			btnCode(){
				var that = this;
				var time = 60;
				if( this.data.tel.length !== 11 ){
					uni.showToast({icon:"none",title:"请输入正确的手机号"})
					return;
				}else{
					if( that.data.timing == false ){
							let param={
								token:this._$userToken("userInfo").token,
								phone:this.data.tel,
								type:1
							};
							this._$InitRequest.request('MemberInfo/editphonecode', param).then(res => {
								if( res.status !== 200 ){
									uni.showToast({icon:"none",title:res.mess})
									return;
								}else{
									uni.showToast({icon:"none",title:res.mess})
									var timeer = setInterval(function(){
										that.data.codeName = time + "s"
										that.data.timing = true
										time--;
										if( time == -1 ){
											clearInterval(timeer)
											that.data.codeName = "获取验证码"
											that.data.timing = false
										}
									},1000)
								}
							},error=>{})
					}else{
						uni.showToast({icon:"none",title:"请勿重复获取"})
					}
				}
			},
			btnCodes(){
				var that = this;
				var time = 60;
				if( this.data.newTel.length !== 11 ){
					uni.showToast({icon:"none",title:"请输入正确的手机号"})
					return;
				}else{
					if( that.data.timings == false ){
							let param={
								token:this._$userToken("userInfo").token,
								phone:this.data.newTel,
								type:2
							};
							this._$InitRequest.request('MemberInfo/editphonecode', param).then(res => {
								if( res.status !== 200 ){
									uni.showToast({icon:"none",title:res.mess})
									return;
								}else{
									uni.showToast({icon:"none",title:res.mess})
									var timeer = setInterval(function(){
										that.data.codeNames = time + "s"
										that.data.timings = true
										time--;
										if( time == -1 ){
											clearInterval(timeer)
											that.data.codeNames = "获取验证码"
											that.data.timings = false
										}
									},1000)
								}
							},error=>{})
					}else{
						uni.showToast({icon:"none",title:"请勿重复获取"})
					}
				}
			},
			btnSure(){
				if( this.data.tel == "" ){
					uni.showToast({icon:"none",title:"请输入手机号"})
					return;
				}else if( this.data.tel.length !== 11 ){
					uni.showToast({icon:"none",title:"请输入正确的手机号"})
					return;
				}else if( this.data.code == "" ){
					uni.showToast({icon:"none",title:"请输入验证码"})
					return;
				}else if( this.data.newTel == "" ){
					uni.showToast({icon:"none",title:"请输入新手机"})
					return;
				}else if( this.data.newCode == "" ){
					uni.showToast({icon:"none",title:"请输入验证码"})
					return;
				}else{
					let param={
						token:this._$userToken("userInfo").token,
						replace_phone:this.data.tel,
						replace_code:this.data.code,
						phone:this.data.newTel,
						phonecode:this.data.newCode,
					};
					this._$InitRequest.request('MemberInfo/editphone', param).then(res =>{
						if( res.status !== 200 ){
							uni.showToast({icon:"none",title:res.mess})
							return;
						}else{
							uni.showToast({icon:"none",title:res.mess})
							setTimeout(function(){
								uni.switchTab({
									url:"/pages/tabbar/mine"
								})
							},1500)
						}
					},error=>{})
					
				}
			},
		}
	}
</script>